<template>
  <button @click="modalOpen = true">打开一个对话框</button>

  <Teleport to='body'>
    <!-- 对话框代码 -->
    <div v-if="modalOpen">
      <div>这是对话框</div>
      <button @click="modalOpen = false">关闭对话框</button>
    </div>
  </Teleport>
</template>

<script lang='ts'>
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    //控制对话框显示或隐藏
    const modalOpen = ref(false);
    return {
      modalOpen,
    };
  },
});
</script>
